<template>
    <div v-bind:style="{ height: clientHeight + 'px' }">
        <Row>
            <Col span="8">
            <Form ref="dataModel" :model="dataModel" :rules="ruleValidate" :label-width="100">
                <Form-item style="display:none;" prop="Id">
                    <Input v-model="dataModel.Id"></Input>
                </Form-item>
                <Form-item label="账号" prop="Account">
                    {{dataModel.Account}}
                </Form-item>
                <Form-item label="姓名" prop="UserName">
                    <Input v-model="dataModel.UserName" placeholder="请输入姓名"></Input>
                </Form-item>
                <Form-item label="工作单位" prop="UninName">
                    <Input v-model="dataModel.UninName" placeholder="请输入工作单位"></Input>
                </Form-item>
                <Form-item label="单位地址" prop="UnitAddress">
                    <Input v-model="dataModel.UnitAddress" placeholder="请输入单位地址"></Input>
                </Form-item>
                <Form-item label="职务" prop="PostName">
                    <Input v-model="dataModel.PostName" placeholder="请输入职务"></Input>
                </Form-item>
                <Form-item label="办公电话" prop="TelPhone">
                    <Input v-model="dataModel.TelPhone" placeholder="请输入办公电话"></Input>
                </Form-item>
                <Form-item label="电话" prop="Phone">
                    <Input v-model="dataModel.Phone" placeholder="请输入电话"></Input>
                </Form-item>
                <Form-item label="QQ号" prop="QQ">
                    <Input v-model="dataModel.QQ" placeholder="请输入电话"></Input>
                </Form-item>
                <Form-item label="电子邮件" prop="Email">
                    <Input v-model="dataModel.Email" placeholder="请输入邮件"></Input>
                </Form-item>
                <Form-item>
                    <Button type="primary" @click="save('dataModel')">保存</Button>
                </Form-item>
            </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleValidate: {//验证模型
                UserName: [{ required: true, message: '请输入姓名!', trigger: 'blur' }],
                Phone: [{ required: true, message: '请输入电话号码!', trigger: 'blur' }],
                UninName:[{ required: true, message: '请输入单位名称!', trigger: 'blur' }],
               // QQ:[{ required: true, message: '请输入qq号!', trigger: 'blur' }],
            },
            dataModel: {//编辑模型
                Id: 0,
                Account: '',
                AreaCode: '',
                UserName: '',
                UserType: '1',
                Status: '1',
                UninName: '',
                UnitAddress: '',
                PostName: '',
                TelPhone: '',
                QQ:'',
                Email: '',
                Phone: '',
                Sort: '1',
                Remark: ''
            },
            clientHeight: window.innerHeight - 137,//表格默认高度
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 137;
            })()
        };
    },
    methods: {
        //编辑获取对象传入id
        initUserInfo() {//编辑
            var self = this;
            var user = this.GetlocaStorage("fruuserinfo");
            this.dataModel.Id = user.UserId;
            this.$http.get("User", { params: { id: this.dataModel.Id } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataModel = res.data.model;
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "编辑数据加载失败!!!" });
                    }
                }
            );
        },
        //保存方法
        save(modelname) {
            var self = this;
            this.$refs[modelname].validate((valid) => {
                if (valid) {
                    this.$http.put('User', this.dataModel).then(
                        function (res) {
                            switch (res.data.status) {
                                case 0:
                                    self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                                    break;
                                case 1:
                                    self.$Notice.success({ title: '更新成功！', desc: false });
                                    break;
                                case -1:
                                    self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                                    break;
                            }
                        });
                }
            });
        },
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.initUserInfo();
    },
}
</script>